<!doctype html>
<html class="no-js">
<script src="../js/head.js"></script>
<body>
<script src="../js/header.js"></script>
<div class="am-cf admin-main">
    <!-- sidebar start -->
    <script src="../js/sidebar.js"></script>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content" id="content-body">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">请假申请</strong>
                </div>
            </div>

            <hr>

            <div class="am-g" align="center">
                <div class="am-u-sm-2"><br/></div>
                <div class="am-u-sm-8">
                    <form class="am-form" id="form" data-am-validator>
                        <legend><strong>请假表填写</strong></legend>
                        <div class="am-u-sm-6">

                            <div class="am-form-group">
                                <label for="name">姓名：</label>
                                <input type="text" class="am-form-field" id="name" style="text-align: center" disabled/>
                            </div>
                            <div class="am-form-group">
                                <label for="start">开始时间：</label>
                                <input type="date" class="am-form-field" id="start" style="text-align: center"
                                       required="true"/>
                            </div>
                            <div class="am-form-group">
                                <label for="total">总时长（天）：</label>
                                <input type="number" class="am-form-field" id="total" style="text-align: center"
                                       disabled/>
                            </div>
                        </div>

                        <div class="am-u-sm-6">
                            <div class="am-form-group">
                                <label for="sex">性别：</label>
                                <input type="text" class="am-form-field" style="text-align: center" id="sex" disabled/>
                            </div>
                            <div class="am-form-group">
                                <label for="end">结束时间：</label>
                                <input type="date" class="am-form-field" style="text-align: center" id="end" required/>
                            </div>
                            <div class="am-form-group">
                                <label for="type">请假类型：</label>
                                <select id="type" class="am-form-field data-am-selected" style="text-align: center"
                                        required>
                                </select>
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="reason">请假缘由：</label>
                            <textarea class="am-form-field" rows="3" id="reason" minlength="10"
                                      maxlength="255"></textarea>
                        </div>
                        <div class="am-form-group">
                            <label for="memo">备注：</label>
                            <textarea class="am-form-field" rows="2" id="memo" minlength="10"
                                      maxlength="255"></textarea>
                        </div>
                        <hr/>
                        <button type="button" class="am-btn am-btn-secondary am-round" onclick="mySubmit()">确定</button>
                        <input type="button" class="am-btn am-btn-warning am-round" text="重置" value="重置"
                               onclick="myReset()">
                    </form>
                </div>
                <div class="am-u-sm-2"><br/></div>

            </div>
            <script src="../js/footer.js"></script>
        </div>
        <!-- content end -->
    </div>

    <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
       data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">提示</div>
        <div class="am-modal-bd" id="msg">
            添加请假申请成功！
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>
<script src="../js/util.js"></script>
<script>
    $(function () {
        var nowTemp = new Date();
        var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
        var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
        var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
        var $myStart2 = $('#start');

        var checkin = $myStart2.datepicker({
            onRender: function (date, viewMode) {
                // 默认 days 视图，与当前日期比较
                var viewDate = nowDay;

                switch (viewMode) {
                        // moths 视图，与当前月份比较
                    case 1:
                        viewDate = nowMoth;
                        break;
                        // years 视图，与当前年份比较
                    case 2:
                        viewDate = nowYear;
                        break;
                }

                return date.valueOf() < viewDate ? 'am-disabled' : '';
            }
        }).on('changeDate.datepicker.amui', function (ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate());
                checkout.setValue(newDate);
            }
            checkin.close();
            if ($('#end').val() != "") {
                var total = 1 + new Date($('#end').val()).getTime() / 1000 / 60 / 60 / 24 -
                        new Date($('#start').val()).getTime() / 1000 / 60 / 60 / 24;
                $('#total').val(total);
            }
            $('#end')[0].focus();
        }).data('amui.datepicker');

        var checkout = $('#end').datepicker({
            onRender: function (date, viewMode) {
                var inTime = checkin.date;
                var inDay = inTime.valueOf();
                var inMoth = new Date(inTime.getFullYear(), inTime.getMonth(), 1, 0, 0, 0, 0).valueOf();
                var inYear = new Date(inTime.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();

                // 默认 days 视图，与当前日期比较
                var viewDate = inDay;

                switch (viewMode) {
                        // moths 视图，与当前月份比较
                    case 1:
                        viewDate = inMoth;
                        break;
                        // years 视图，与当前年份比较
                    case 2:
                        viewDate = inYear;
                        break;
                }

                return date.valueOf() < viewDate ? 'am-disabled' : '';
            }
        }).on('changeDate.datepicker.amui', function (ev) {
            if ($('#start').val() != "") {
                var total = 1 + new Date($('#end').val()).getTime() / 1000 / 60 / 60 / 24 -
                        new Date($('#start').val()).getTime() / 1000 / 60 / 60 / 24;
                $('#total').val(total);
            }
            checkout.close();
        }).data('amui.datepicker');


        $.ajax({
            type: 'get',
            dataType: 'json',
            url: '../type',
            success: function (data) {
                if (data.success) {
                    var list = data.result.list;
                    for (var i = 0; i < list.length; i++) {
                        $('#type').append('<option value="' + list[i].id + '"> ' + list[i].name + '</option>');
                    }
                } else {
                    $.messager.show({    // show error message
                        title: 'Error',
                        msg: data.message
                    });
                }
            }
        });

        $("#name").val(current.name);
        $("#sex").val(sexFormatter(current.sex));

    });

    function mySubmit() {
        var data = [];
        data.push({"name": "uid", "value": current.uid});
        data.push({"name": "start", "value": $("#start").val()});
        data.push({"name": "end", "value": $("#end").val()});
        data.push({"name": "type", "value": $("#type").val()});
        data.push({"name": "total", "value": $("#total").val()});
        data.push({"name": "reason", "value": $("#reason").val()});
        data.push({"name": "memo", "value": $("#memo").val()});
        if (current.job == 1) {
            data.push({"name": "state", "value": 5})
        } else if (current.job == 2) {
            data.push({"name": "state", "value": 2})
        } else if (current.job == 5) {
            data.push({"name": "state", "value": 1})
        }
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: '../vacation',
            data: {uid: current.uid, type: $("#type").val()},
            success: function (response) {
                var result = response.result.list;
                var vacationId = 0;
                if(result.length != 0){
                    vacationId = result[0].id;
                }
                if (result.length == 0 || result.length != 0 && result[0].rest >= $("#total").val()) {
                    $.ajax({
                        type: 'post',
                        dataType: 'json',
                        url: '../apply',
                        data: JSON.form2param(data),
                        success: function (response) {
                            if (response.success) {
                                $('#my-alert').modal('open')
                                if(vacationId != 0){
                                    $.ajax({
                                        type: 'put',
                                        dataType: 'json',
                                        url: '../vacation',
                                        data: {id:vacationId,rest:result[0].rest - $("#total").val()},
                                        success: function (response) {
                                            if (response.success) {

                                            } else {
                                                $.messager.show({    // show error message
                                                    title: 'Error',
                                                    msg: "调整假期剩余时间失败!"
                                                });
                                            }
                                        }
                                    })
                                }
                                setTimeout("window.location.href='viewApply.html'", 2000);
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: response.message
                                });
                            }
                        }
                    });
                } else {
                    $.messager.show({    // show error message
                        title: '提示',
                        msg: "该假期剩余时间不足!"
                    });
                }
            }
        });


    }

    function myReset() {
        $('#start').datepicker('setValue', new Date())
        $('#end').datepicker('setValue', new Date())
        $("#reason").val("");
        $("#memo").val("");
        $("#total").val(1);
    }
</script>
</body>
</html>
